

Tutorial Sobre Formulrios HTML



Neste tutorial, voc vai aprender a criar Formulrios HTML, que permitem ao usurio enviar informao ao servidor Web. 

Tags Associadas a Formulrios

Bsico de Formulrios 


Texto 

Campos de Texto Campos de Password Campos Escondidos reas de Texto 


Menus 

Menus de Opes Listas Mltiplas 


Botes 

Checkboxes Radio Buttons Botes de Reset e Submit Imagens como Botes 

------------------------------------------------------------------------

Campos de Texto

O objeto mais simples de entrada em formulrios  o objeto text. Este campo permite a entrada de uma nica palavra ou uma linha de texto, com uma largura default de 20 caracteres. 

Opes: 

VALUE="" OPCIONAL 
Usando a tag VALUE, voc pode especificar o texto que aparecer no campo quando o formulrio for carregado. 


SIZE="" OPCIONAL 
Com esta opo, voc pode mudar o tamanho do campo exibido. 
Nota: o usurio pode escrever mais caracteres que essa quantidade, nesse caso o texto ir rolar para a esquerda dentro do campo. 


MAXLENGTH="" OPCIONAL 
Caso voc queira limitar o nmero de caracteres que o usurio poder entrar, use esta tag. Ser emitido um beep se o usurio tentar exceder o tamanho mximo do campo MAXLENGTH. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Qual o seu primeiro nome?
<INPUT TYPE="text" NAME="primeiro_nome" VALUE="Antonio" SIZE="10" MAXLENGTH="15">

</FORM>


Qual o seu primeiro nome?  

------------------------------------------------------------------------
Nota: 

O valor de NAME deve usar underscore ao invs de espaos. Espaos em nome de objetos de formulrios pode causar problema quando o servidor tentar decodificar a entrada. 

As tags em itlico so exemplos de como implementar tags de opes. Neste exemplo, elas so opcionais, mas nos exemplos que seguem algumas delas sero obrigatrias. 

Se voc tem somente um campo de texto em um formulrio, a tecla ENTER no campo ir submeter o formulrio, como se o usurio tivesse clicado o boto de SUBMIT. 

------------------------------------------------------------------------

Campos de Password

Elementos de entrada do tipo password so exatamente iguais aos campos text, exceto que todos os caracteres so representados por um *. 

Opes: 

VALUE="" OPCIONAL 
Usando a tag VALUE, voc pode especificar o texto que voc quer como default, tal como a password de um grupo. 


SIZE="" OPCIONAL 
Com esta opo, voc pode mudar o tamanho do campo exibido. 


MAXLENGTH="" OPCIONAL 
Caso voc queira limitar o nmero de caracteres que o usurio poder entrar, use esta tag. Ser emitido um beep se o usurio tentar exceder o tamanho mximo do campo MAXLENGTH. 

------------------------------------------------------------------------


<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Digite sua password (mx. 8 caracteres):
<INPUT TYPE="password" NAME="sua_senha" SIZE="8" MAXLENGTH="8">
</FORM>


Digite sua password (mx. 8 caracteres):  

------------------------------------------------------------------------
Nota: 

Se voc for usar MAXLENGTH para limitar o nmero de caracteres, certifique-se de especificar o mesmo para SIZE, para dar ao usurio uma dica de quanto espao ele tem. 

Muito embora o seu VALUE default possa ser coberto por astersticos, o usurio pode descobri-lo examinando o cdigo fonte do documento (uma opo em quase todos os browsers). 

------------------------------------------------------------------------

Campos Escondidos

 possvel "esconder" informao de entrada dentro de um formulrio com a tag HIDDEN. O campo ser decodificado pelo servidor, mas no ser exibido para o usurio no formulrio. 


Opes: 

VALUE="" OBRIGATRIO 
Usando a tag VALUE, voc precisa especificar o valor de texto escondido que ser enviado para decodificao. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Voc no pode ver nada aqui.
<INPUT TYPE="hidden" NAME="meu_nome" VALUE="Antonio">

</FORM>
Voc no pode ver nada aqui.  

------------------------------------------------------------------------
Nota: 

Muito embora o valor em HIDDEN no seja exibido no formulrio, o usurio pode ver o texto escondido examinando o cdigo fonte HTML. 

------------------------------------------------------------------------

reas de Texto

A tag TEXTAREA no usa a conveno INPUT TYPE="text" dos exemplos anteriores. Ao invs disso, utiliza a tag de abertura <TEXTAREA> e a tag de finalizao </TEXTAREA>. 

Opes: 

ROWS="" OBRIGATRIO 
Especifica o nmero de linhas da caixa. 


COLS="" OBRIGATRIO 
Especifica o nmero de colunas da caixa. 


Texto default OPCIONAL 
Se voc desejar que aparea um texto default dentro da rea de texto, simplesmente escreva o texto entre as tags de abertura e finalizao TEXTAREA. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Envie seus comentrios e sugestes para mim:<BR>
<TEXTAREA NAME="comentrios" ROWS="3" COLS="50">
Oi Antonio! Este tutorial  realmente muito bom!
</TEXTAREA>
</FORM>


Envie seus comentrios e sugestes para mim:

------------------------------------------------------------------------
Nota: 

Scrollbars aparecem para o usurio, para o caso em que se queira ultrapassar o nmero de linhas e colunas (ROWS e COLS) especificadas. 

Browsers mais antigos assumem a conveno SIZE="xx,yy", ao invs de ROWS e COLS. Na medida em que novos browsers so liberados, isso deixar de ser um problema. 

No existe nenhuma maneira de forar quebra de linha automtica na caixa de texto. 

------------------------------------------------------------------------

Menus de Opes

A tag SELECT segue a mesma conveno que o elemento TEXTAREA, isto , tendo suas opes entre as tags <SELECT> e </SELECT>. 


Opes: 

OPTION OBRIGATRIO 
Especifica uma opo do menu. 


VALUE="" OPCIONAL 
Especifica o valor da opo a ser enviado para o servidor. 
Se no estiver definido, o nome da opo  enviado como valor. 


SELECTED OPCIONAL 
Por default, a primeira opo  exibida no menu. 
Esta tag estabelece a opo default a ser exibida no menu, caso no seja a primeira opo. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Que tipo de comida voc prefere?
<SELECT NAME="tipo_de_comida">
<OPTION>Baiana
<OPTION VALUE="min">Mineira
<OPTION>rabe
<OPTION SELECTED>Italiana
<OPTION VALUE="chin">Chinesa
</SELECT>

</FORM>

Que tipo de comida voc prefere?  

------------------------------------------------------------------------
Nota: 

Se voc tiver mais que 3 ou 4 opes para escolher, e o usurio puder somente selecionar UMA, ento este  o melhor elemento de formulrio. 

Caso voc queira usar mais de uma palavra na opo VALUE, use o underscore para separar as palavras, ao invs de separ-las por espao. 

------------------------------------------------------------------------

Listas Mltiplas

A nica diferena entre este elemento e o SELECT anterior  a introduo da opo SIZE. Ela especifica quantas linhas da lista so exibidas numa caixa. 


Opes: 

MULTIPLE OPCIONAL 
Especifica que mltiplas opes podem ser selecionadas, ao contrrio do SELECT no exemplo anterior, onde somente uma opo pode ser selecionada no menu. 

SIZE="" OBRIGATRIO 
O nmero de linhas a serem exibidas numa caixa. 


OPTION OBRIGATRIO 
Especifica uma opo da lista. 


VALUE="" OPCIONAL 
Especifica o valor da opo a ser enviado para o servidor. 
Se no estiver definido, o nome da opo  enviado como valor. 


SELECTED OPCIONAL 
Esta tag estabelece uma opo como selecionada. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

O que voc precisa comprar hoje?<BR>
<SELECT NAME="compra" MULTIPLE SIZE="5">
<OPTION>Feijo
<OPTION VALUE="PH" SELECTED>Papel higinico
<OPTION>Legumes
<OPTION>Po
<OPTION SELECTED>Leite
<OPTION>Manteiga
<OPTION>Frutas
<OPTION>Guardanapos
</SELECT>

</FORM>

O que voc precisa comprar hoje?

------------------------------------------------------------------------
Nota: 

Em alguns browsers, pode ser necessrio pressionar a tecla CONTROL ou SHIFT para selecionar mltiplos itens. 

Este elemento de entrada  excelente para listas com muitas opes, porque voc pode controlar quantas linhas exibir simultanemente. 

Se mltiplos itens forem selecionados, eles sero passados para o servidor com o mesmo nome. Desse modo, o programa que ir decodificar o formulrio ter que reconhecer mltiplos valores associados com o mesmo nome. 

------------------------------------------------------------------------

Checkboxes

Retornando  conveno INPUT TYPE="", os CHECKBOXES so os melhores elementos para serem usados na escolha de uma entre duas opes. 


Opes: 

VALUE="" OPCIONAL 
Especifica o valor da opo a ser enviado para o servidor. 
Se no estiver definido, o valor "on"  enviado para o servidor. 


CHECKED OPCIONAL 
Esta tag estabelece uma opo como selecionada. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT TYPE="checkbox" NAME="doao" CHECKED>
 Sim, eu gostaria de fazer uma doao
<P>
<INPUT TYPE="checkbox" NAME="mailing_list">
 Sim, eu gostaria de ser includo na sua mailing list
 
</FORM>

Sim, eu gostaria de fazer uma doao 

Sim, eu gostaria de ser includo na sua mailing list 

------------------------------------------------------------------------
Nota: 

Este elemento funciona melhor para resposta a perguntas do tipo "sim/no". 

Voc pode simular uma lista SELECT MULTIPLE tendo CHECKBOXES com o mesmo NAME mas VALUES diferentes. 

------------------------------------------------------------------------

Radio Buttons

Os RADIOBUTTONS usam uma notao similar aos CHECKBOXES, porm apenas uma opo pode ser escolhida entre vrias. 


Opes: 

VALUE="" OBRIGATRIO 
Especifica o valor da opo a ser enviado para o servidor. 
Se no estiver definido, o valor "on"  enviado para o servidor. 


CHECKED RECOMENDADO 
Esta tag especifica qual radiobutton estar selecionado por default. 


------------------------------------------------------------------------
<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Compilar programa com:
<DL>
<DD>Verso
<INPUT TYPE="radio" NAME="verso" VALUE="4.035">4.035
<INPUT TYPE="radio" NAME="verso" VALUE="4.036">4.036
<INPUT TYPE="radio" NAME="verso" VALUE="5.0" CHECKED>5.0
<DD>Sada para: 
<INPUT TYPE="radio" NAME="sada" VALUE="tela">tela
<INPUT TYPE="radio" NAME="sada" VALUE="impressora">impressora
</DL>

</FORM>

Compilar programa com: 

Verso: 4.035 4.036 5.0 
Sada para: tela impressora 

------------------------------------------------------------------------
Nota: 

Como mencionado anteriormente, RADIOBUTTONS no so bons para listas com muitos itens, porque o browser tem problemas para exibir muitos elementos. Neste caso  melhor usar um objeto de menu SELECT. 

Uma vez selecionado um radiobutton, no pode ser desativado sem escolher um outro radiobutton que tenha o mesmo NAME. A seleo default pode ser obtida com o uso do boto RESET, que ser introduzido no prximo exemplo. 

Se voc tem um grupo de RADIOBUTTONS com o mesmo NAME e nenhum VALUE especificado, o servidor no ser capaz de dizer qual est selecionado, uma vez que o valor default "on" ser enviado. 

------------------------------------------------------------------------


Botes de Reset e Submit

Ao invs do usurio ter que corrigir cada entrada individualmente, um boto RESET pode ser usado para restaurar todos os valores de entrada aos seus defaults, como se nenhuma informao tivesse sido fornecida anteriormente. 

E finalmente, uma vez que o usurio tenha terminado de preencher todos os campos de entrada de um FORM, tem que haver alguma maneira de enviar toda informao desses campos para o servidor. O boto SUBMIT transfere toda a informao para a URL especificada no elemento ACTION. 


Opes: 

VALUE="" OPCIONAL 
Especifica o texto a ser exibido no boto. 
Se no estiver definido, os valores "Reset" e "Submit Query" sero exibidos para os botes RESET e SUBMIT, respectivamente. 


NAME="" OPCIONAL 
Se NAME estiver definido em um boto SUBMIT, o formulrio ir transferir o contedo de VALUE, assim permitindo a voc ter vrios botes SUBMIT cada um para um propsito diferente. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/nenhuma">

Qual o seu primeiro nome? <INPUT TYPE="text"><BR>
Pressione este boto: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpa campos">
<INPUT TYPE="submit">

</FORM>

Qual o seu primeiro nome? 
Pressione este boto: 

Nota: 

O programa para o qual esta informao  enviada via boto SUBMIT no existe, por isso o seu browser deve estar reportando um erro. Normalmente, o programa de decodificao envia de volta um documento HTML aps ter processado sua informao. 

Nem todos os browsers suportam mtilplos botes SUBMIT. Por isso, use o boto SUBMIT somente para transmitir a informao de entrada. 

------------------------------------------------------------------------

Imagens como Botes

Um elemento de formulrio pouco documentado e usado  o IMAGE, que permite a voc usar uma imagem interna como um boto SUBMIT, alm de transferir as coordenadas onde foi clicada. 


Opes: 

SRC="" OBRIGATRIO 
Esta tag diz ao formulrio onde a imagem vai ser exibida e usada. 
Similar  tag IMG SRC="" do HTML. 


NAME="" OPCIONAL 
Esta tag ir concatenar o texto definido por NAME s coordenadas, resultando em "texto.X" e "texto.Y" como nomes. 

------------------------------------------------------------------------

<FORM METHOD="POST" ACTION="/cgi-bin/faznada">

Clique em uma parte da imagem<BR>
<INPUT TYPE="image" SRC="/images/icons.gif">

</FORM>

Clique em uma parte da imagem

------------------------------------------------------------------------
Nota: 

Diferente de um IMAGEMAP que somente aceita um conjunto de coordenadas, informaes adicionais do FORM, tais como campos de texto e menus de opes, podem ser transmitidas para o servidor usando esta tag. 

Novamente, o programa para o qual esta informao  enviada no existe, por isso o seu browser deve estar reportando um erro. 

Nem todos os browsers suportam esta tag. Use-a com cautela. 


-----------------------------------------------------------------------
                     
                      <---Vincius Nizolli Kuhn--->